<template>
  <div class="box">
    <div class="querybox">
      <el-input
        v-model="filters.searchBy"
        placeholder="请输入查询内容"
        style="width: 200px; right: 10px;"
        @keyup.enter.native="paymentList(1)"
      />
      <el-button
        type="primary"
        @click="paymentList(1)"
      >查询</el-button>
      <el-button
        type="primary"
        @click="add"
      >新增</el-button>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="orderNo"
        label="订单号"
      />
      <el-table-column
        prop="totalFee"
        label="费率(%)"
      />
      <el-table-column label="产品名称">
        <template slot-scope="scope">
          <div>{{ scope.row.product ? scope.row.product.name : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="产品价格">
        <template slot-scope="scope">
          <div>{{ scope.row.product ? scope.row.product.price : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="产品封面">
        <template slot-scope="scope">
          <img
            :src="scope.row.product ? scope.row.product.cover : ''"
            alt=""
            width="80px"
          >
        </template>
      </el-table-column>
      <el-table-column label="用户姓名">
        <template slot-scope="scope">
          <div>{{ scope.row.user && scope.row.user.nickName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="机构">
        <template slot-scope="scope">
          <!-- <div>{{ scope.row.org ? scope.row.org.name : '' }}</div> -->
          <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row, 'org')"
          >{{ scope.row.org && (scope.row.org.name || scope.row.org.id) }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <div>{{ scope.row.user && scope.row.user.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column label="用户性别">
        <template slot-scope="scope">
          <div>{{ scope.row.user && scope.row.user.sexDesc }}</div>
        </template>
      </el-table-column>
      <el-table-column label="优惠码">
        <template slot-scope="scope">
          <div>{{ scope.row.product && scope.row.product.code }}</div>
        </template>
      </el-table-column>
      <el-table-column label="支付结果">
        <template slot-scope="scope">
          <div>{{ scope.row.resultCode === 'SUCCESS' ? '支付成功' : (!scope.row.resultCode ? '未支付' : '支付失败') }}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row, 'view')"
          >查看</el-button>
          <!-- <el-button type="text" size="small" @click="delUser(scope.row, scope.index)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      :title="editType === 'add' ? '新增' : '查看'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
    >
      <div v-if="editType === 'view'">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>基本信息</span>
          </div>
          <div
            v-for="(item, key) in form"
            :key="key"
            class="text item"
          >
            <!-- <span v-if="key !== 'user' || key !== 'product'">{{ filedsTrans('basic', key) }}<span v-if="filedsTrans('basic', key) && item">：{{ item }}</span></span> -->
            <span v-if="filedsTrans('basic', key) && item">
              <span class="labelStyle">{{ filedsTrans('basic', key) }}：</span>
              <span>
                <img v-if="key === 'headImgUrl'" key="fdalfds" :src="item" width="40" style="vertical-align: middle;">
                <span v-else key="fsadf">{{ item }}</span>
              </span>
            </span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>用户信息</span>
          </div>
          <div
            v-for="(item, key) in form.user"
            :key="key"
            class="text item"
          >
            <span v-if="filedsTrans('user', key) && item">
              <span class="labelStyle">{{ filedsTrans('user', key) }}：</span>
              <span>
                <img v-if="key === 'headImgUrl'" key="fdal" :src="item" width="40" style="vertical-align: middle;">
                <span v-else key="fsadf">{{ item }}</span>
              </span>
            </span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>产品信息</span>
          </div>
          <div
            v-for="(item, key) in form.product"
            :key="key"
            class="text item"
          >
            <span v-if="filedsTrans('product', key) && item">
              <span class="labelStyle">{{ filedsTrans('product', key) }}：</span>
              <span>
                <img v-if="key === 'headImgUrl' || key === 'cover'" key="fdal" :src="item" width="40" style="vertical-align: middle;">
                <span v-else-if="key === 'type'" key="fsadfdf">{{ key === 1 ? '次数' : '时间' }}</span>
                <span v-else key="fsadf">{{ item }}</span>
              </span>
            </span>
          </div>
        </el-card>
      </div>

      <el-card
        v-if="editType === 'org'"
        class="box-card"
        shadow="hover"
      >
        <div
          slot="header"
          class="clearfix"
          style="position: relative;"
        >
          <span>机构信息</span>
        </div>
        <el-form
          ref="formOrg"
          :model="formOrg"
          :rules="rulesOrg"
          :inline="true"
        >
          <el-form-item
            label="机构名称"
            prop="name"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.name"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构代码"
            prop="code"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.code"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="是否是测试机构"
            prop="test"
            :label-width="formLabelWidth"
          >
            <el-input
              :value="formOrg.test ? '是' : '否'"
              autocomplete="off"
              readonly
            />
            <!-- <span :label-width="formLabelWidth">{{formOrg.test ? '是' : '否'}}</span> -->
          </el-form-item>
          <el-form-item
            label="机构联系电话"
            prop="contactNumber"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.contactNumber"
              autocomplete="off"
            />
          </el-form-item>
          <!-- <el-form-item label="机构地址" prop="pcaCodeDesc" :label-width="formLabelWidth">
            <el-input v-model="formOrg.pcaCodeDesc" autocomplete="off" />
          </el-form-item> -->
          <el-form-item
            label="机构地址"
            prop="pcaCodeDesc"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.pcaCodeDesc"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构地址码"
            prop="pcaCode"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.pcaCode"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="机构街道地址"
            prop="address"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.address"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="总评时间"
            prop="totalDuration"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.totalDuration"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="可报告数量"
            prop="restCount"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.restCount"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="子账号数量"
            prop="staffCount"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.staffCount"
              autocomplete="off"
              disabled
            />
          </el-form-item>
          <el-form-item
            label="子账号数量配额"
            prop="staffQuota"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="formOrg.staffQuota"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="logo"
            prop="logo"
            :label-width="formLabelWidth"
          >
            <Upload
              v-model="formOrg.logo"
              style="width: 185px;"
              :img-url="formOrg.logo"
              @on-success="onSuccess"
            />
          </el-form-item>
          <el-form-item
            label="到期时间"
            prop="expireTime"
            :label-width="formLabelWidth"
          >
            <el-date-picker
              v-model="formOrg.expireTime"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <!-- <el-form-item
            label="商业机构"
            prop="bizOrg"
            :label-width="formLabelWidth"
          >
            <el-switch
              v-model="formOrg.bizOrg"
              :disabled="formOrg.bizOrg"
              @change="bizOrgChange(formOrg.id)"
            />
          </el-form-item> -->
        </el-form>
      </el-card>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('formOrg')">取 消</el-button>
        <el-button
          v-if="editType === 'org'"
          type="primary"
          @click="closeDialogForm('formOrg')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { promocodeInfo, promocodeEdit } from '@/api/promocode'
import { paymentList } from '@/api/payment'
import { bizorg_trans, orgsedit } from '@/api/org'
import { timeTranslateHMS } from '@/utils/formatdate'
import Upload from '@/components/Upload'
export default {
  name: 'Documentation',
  components: {
    Upload
  },
  data() {
    return {
      timeTranslateHMS,
      filters: {
        redeemCodeId: this.$route.params.id,
        mobile: '',
        username: '',
        pageNum: 1,
        pageSize: 10,
        searchBy: ''
      },
      form: {
        product: {},
        user: {}
      },
      formOrg: {},
      rulesOrg: {},
      total: 0,
      rules: {
        dealer: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dealerPhone: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        sales: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        salesQuantity: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        salesQuota: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        rebate: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        deleted: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        comment: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        created: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: '',
      editType: null
    }
  },
  mounted() {
    this.paymentList()
  },
  methods: {
    filedsTrans(type, key) {
      const obj = {
        basic: {
          appId: 'appId',
          bankType: 'bankType',
          createTime: '交易时间',
          mchId: 'mchId',
          订单号: 'orderNo',
          productIssueStatus: 'productIssueStatus',
          resultCode: 'resultCode',
          status: 'status',
          totalFee: '手续费',
          timeEnd: 'timeEnd',
          tradeType: 'tradeType',
          transactionId: 'transactionId'
        },
        product: {
          name: '产品名称',
          cover: '产品封面',
          price: '产品价格',
          code: '产品代码',
          type: '产品类型',
          promotion: 'promotion',
          comment: '说明'
        },
        user: {
          realName: '姓名',
          nickName: '昵称',
          headImgUrl: '用户头像',
          mobile: '手机号码',
          sex: '性别',
          sourceAppId: '来源appId',
          ID: 'id',
          created: '创建时间'
        }
      }
      return obj[type][key]
    },
    bizOrgChange(orgId) {
      orgId = '4028808a748b6e4f01748b71b6bf0002'
      bizorg_trans({ orgId }).then((res) => {
      })
    },
    // dialog关闭事件
    beforeClose() {
      this.resetForm('formOrg')
    },
    // logo上传成功监听
    onSuccess(res) {
      this.form.logo = res
    },
    // 新增操作
    add() {
      this.editType = 'add'
      this.dialogFormVisible = true
    },
    // 分页切换监听
    handleSizeChange(pageNum) {
      this.filters.pageNum = pageNum
      this.paymentList()
    },
    // 用户列表
    paymentList(num) {
      if (num) {
        this.filters.redeemCodeId = ''
      }
      if (num === 1) this.filters.pageNum = 1 // 查询时，分页器数字重置为1
      const pageNum = (num || this.filters.pageNum) - 1
      paymentList({ ...this.filters, pageNum }).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    delUser(row, index) {
      this.editType = 'delete'
      this.tableData.splice(row, 1)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 修改用户
    updUser(row, index) {
      this.editType = 'update'
      this.dialogFormVisible = true
    },
    // 查看用户
    viewUser(row, type) {
      // this.editType = 'view'
      this.editType = type
      this.dialogFormVisible = true
      this.form = row
      this.formOrg = row.org
      //   this.promocodeInfo(id)
    },
    // 用户详情
    promocodeInfo(id) {
      promocodeInfo({ codeId: id }).then(res => {
        // res.data.org.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.usersEdit()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      // this.$refs[formName].resetFields()
    },
    // 新增用户
    promocodeEdit(formName) {
      const form = this.form
      promocodeEdit(form).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.resetForm(formName)
        // this.dialogFormVisible = false
      })
    },
    // 新增用户
    usersEdit(formName, type) {
      // const { staff, org, admin } = this.form
      // const staff = this.form
      const org = this.formOrg
      const obj = { ...org }
      obj.expireTime = timeTranslateHMS(obj.expireTime, null, '/')
      orgsedit(obj).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.resetForm(formName)
        this.paymentList()
        // this.resetForm(formName)
        // this.usersList()
        // this.dialogFormVisible = false
      })
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    text-align: right;
    margin-bottom: 20px;
  }
}
.box-card {
  margin-bottom: 15px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.labelStyle {
  display: inline-block;
  min-width: 80px;
  font-weight: 700;
}
</style>
